<template>
  <div class="editApartment">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的公寓</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/apartmentList' }">公寓列表</el-breadcrumb-item>
      <el-breadcrumb-item>修改公寓信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!--<div>公寓名、城市名、别墅描述、别墅图组、别墅价格、设备、服务 地址</div>-->
    <el-row>
      <el-col :span="12" :offset="2">
        <el-form class="editApartment-container" :rules="rules" ref="form" :model="apartment" label-position="left">
          <el-form-item label="公寓名" prop="apartmentName">
            <el-input placeholder="请输入公寓名" v-model="apartment.apartmentName"></el-input>
          </el-form-item>
          <el-form-item label="城市名" prop="cityName">
            <el-input placeholder="请输入城市名" v-model="apartment.cityName"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input placeholder="请输入地址" v-model="apartment.address"></el-input>
          </el-form-item>
          <el-form-item label="公寓价格" prop="price">
            <el-input type="Number" placeholder="请输入公寓价格，元/日" v-model="apartment.price"></el-input>
          </el-form-item>
          <el-form-item label="设备" prop="device">
            <el-row>
              <el-col>
                <el-checkbox-group v-model="apartment.device">
                  <el-checkbox v-for="item in deviceList" :key="item.deviceId" :label="item.deviceId" :checked="item.isProvided === '1'" border>{{item.deviceName}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="服务" prop="service">
            <el-row>
              <el-col>
                <el-checkbox-group v-model="apartment.service">
                  <el-checkbox  class="serviceCheckbox" v-for="item in serviceList" :key="item.serviceId" :label="item.serviceId" :checked="item.isProvided === '1'" border>{{item.serviceName}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" :autosize="{ minRows: 5}" placeholder="请输入公寓的描述" v-model="apartment.description"></el-input>
          </el-form-item>
          <el-form-item label="图片" v-show="imageUrlList.length > 0">
            <el-row>
              <el-col>
                <img class="img_item" v-for="(item,index) in imageUrlList" :key="index" :src="item">
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item class="btn-container">
            <el-button class="btn_submit" @click="submit('form')">提交</el-button>
            <el-button class="btn_submit" @click="deleteApartment" >删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        deviceList: [],
        serviceList: [],
        imageUrlList: [],
        apartment: {
          apartmentName: '',
          cityName: '',
          price: '',
          device: [],
          service: [],
          description: '',
          address: ''
        },
        rules: {
          apartmentName: [{
            required: true,
            message: '请输入公寓名',
            trigger: 'blur'
          }],
          cityName: [{
            required: true,
            message: '请输入城市名',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入公寓价格',
            trigger: 'blur'
          }],
          device: [{
            required: true,
            message: '请选择公寓的设备',
            trigger: 'blur'
          }],
          service: [{
            required: true,
            message: '请选择公寓的服务',
            trigger: 'blur'
          }],
          description: [
            {
              required: true,
              message: '请添加公寓描述',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    created() {
      this.getApartmentDetail(this.$route.params.id);
    },
    methods: {
      getApartmentDetail(id) {
        this.$http.post('/api/apartment/getApartmentInfo.do', this.$qs.stringify({
          'apartmentId': id
        }))
          .then((response) => {
            let data = response.data;
            if (data.status === 0) {
              this.apartment = data.data.apartment;
              this.$set(this.apartment, 'device', []);
              this.$set(this.apartment, 'service', []);
              this.$set(this.apartment, 'id', parseInt(id));
              this.deviceList = data.data.deviceList;
              this.serviceList = data.data.serviceList;
              var imageUrlStr = data.data.apartment.pictures;
              this.imageUrlList = imageUrlStr.split(',');
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((error) => {
            this.$message.error(error.msg);
          });
      },
      deleteApartment() {
        this.$http.post('/api/apartment/deleteApartment.do', this.$qs.stringify({
          'apartmentId': this.apartment.id
        }))
          .then((response) => {
            let data = response.data;
            if (data.status === 0) {
              this.$message({
                message: `${data.msg},将在1秒后跳转`,
                tpye: 'success',
                duration: 1000,
                onClose: () => {
                  this.$router.push({path: '/apartmentList'});
                }
              });
            }
          })
          .catch(() => {
            this.$message.error('网络错误');
          });
      },
      submit(formname) {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            var deviceStr = this.apartment.device.join();
            var serviceStr = this.apartment.service.join();
            this.$http.post('/api/apartment/editApartmentInfo.do', this.$qs.stringify({
              'id': this.apartment.id,
              'apartmentName': this.apartment.apartmentName,
              'cityName': this.apartment.cityName,
              'price': this.apartment.price,
              'address': this.apartment.address,
              'description': this.apartment.description,
              'deviceIdList': deviceStr,
              'serviceIdList': serviceStr
            }))
              .then((response) => {
               let data = response.data;
               if (data.status === 0) {
                 this.$message({
                   message: data.msg,
                   tpye: 'success',
                   duration: 1000
                 });
               }
              })
              .catch(() => {
                this.$message.error('网络错误');
              });
          }
        });
      }
    }
  };
</script>

<style scoped>
  .editApartment{
    line-height: 0;
    text-align: left;
  }
  .editApartment-container {
    margin-top: 40px;
  }
  .serviceCheckbox{
    line-height: 20px;
  }
  .el-checkbox{
    margin-left: 0;
    margin-right: 5px;
  }
  .el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 0px;
  }
  .btn-container{
    text-align: center;
  }
  .img_item {
    width: 108px;
    height: 72px;
    margin-right: 10px;
  }
</style>
